<template>
  <div id="movieTrend">
    <div class="global-search-main">
      <div class="global-search-wrapper">
        <a-auto-complete
          :dataSource="dataSource"
          class="global-search"
          @select="onSelect"
          @search="handleSearch"
          placeholder="请输入电影名">
          <a-input>
            <a-button slot="suffix" class="search-btn" type="primary" @click.stop="searchWeather">
              <a-icon type="search"/>
            </a-button>
          </a-input>
        </a-auto-complete>
      </div>
    </div>
    <apexchart ref="count" type=line height=300 :width="clientWidth" :options="chartOptions" :series="series" />
  </div>
</template>
<script>
export default {
  name: 'HomePage',
  data () {
    return {
      clientWidth: 1000,
      dataSource: [],
      movies: [],
      movieName: '',
      series: [],
      chartOptions: {
        chart: {
          toolbar: {
            show: false
          }
        },
        plotOptions: {
          bar: {
            horizontal: false,
            columnWidth: '35%'
          }
        },
        dataLabels: {
          enabled: false
        },
        stroke: {
          show: true,
          width: 2,
          colors: ['transparent']
        },
        xaxis: {
          categories: []
        },
        fill: {
          opacity: 1

        }
      }
    }
  },
  methods: {
    onSelect (value) {
      this.getTrendData(value)
      this.movieName = value
    },
    handleSearch (value) {
      this.dataSource = []
      if (!value) {
        return
      }
      this.movieName = value
      for (let i = 0; i < this.movies.length; i++) {
        let currentMovie = this.movies[i]
        if (currentMovie.indexOf(value) !== -1) {
          this.dataSource.push(currentMovie)
        }
      }
    },
    searchWeather: function () {
      this.getTrendData(this.movieName)
    },
    getTrendData (value) {
      this.$get(`dataAll/${value}`).then((r) => {
        console.log(r.data)
        let data = r.data
        let seriesData = []
        let labels = []
        for (let i in data) {
          seriesData.push(parseFloat(data[i].boxOffice))
          labels.push(data[i].dataDate)
        }
        this.$refs.count.updateSeries([
          {
            name: 'top',
            data: seriesData
          }
        ], true)
        this.$refs.count.updateOptions({
          xaxis: {
            categories: labels
          },
          title: {
            text: `${this.movieName}单日票房走势`,
            align: 'center'
          }
        }, true, true)
      })
    }
  },
  mounted () {
    this.$nextTick(function () {
      this.clientWidth = document.getElementById('movieTrend').parentNode.offsetWidth
    })
    this.$get(`maxDataOne/getAll`).then((r) => {
      let data = r.data
      for (let i in data) {
        this.movies.push(data[i].movieTitle)
      }
    }).catch((r) => {
      console.error(r)
      this.$message.error('获取首页信息失败')
    })
  }
}
</script>
<style lang="less">
  .global-search-main {
    margin-bottom: 2.5rem;
    .global-search-wrapper {
      width: 300px;
      margin:0 auto;
      .global-search {
        width: 100%;
      }
    }
  }
</style>
